<template>
  <div class="container">
    <el-row type="flex" justify="space-between">
      <div class="aside" v-if="cityList.length>0">
        <PostAside :city="cityList" @SendCity="handleCity"></PostAside>
      </div>

      <div class="main">
        <!-- //搜索框 -->
        <div class="searchPost">
          <input type="text" placeholder="请输入想去的地方，比如：'广州'" v-model="keywordCity" />
          <i class="el-icon-search" @click="handleSearch(keywordCity)"></i>
        </div>
        <!-- 搜索推荐 -->
        <div class="searchRecommend">
          推荐：
          <span @click="handleSearch('广州')">广州</span>
          <span @click="handleSearch('上海')">上海</span>
          <span @click="handleSearch('北京')">北京</span>
        </div>
        <!-- 文章标题 -->
        <div class="posttitle">
          <h4>推荐攻略</h4>
          <el-button type="primary" @click.native="$router.push('/post/create')">
            <i class="el-icon-edit"></i>
            <span>写游记</span>
          </el-button>
        </div>
        <!-- 文章列表 -->
        <div class="postList" v-if="PostList.length>0">
          <PostList v-for="(postitem,index) in PostList" :key="index" :post="postitem"></PostList>
          <!-- 分页组件 -->
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageIndex"
              :page-sizes="[3, 5, 10, 15]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalpage"
            ></el-pagination>
          </div>
        </div>
      </div>
    </el-row>
  </div>
</template>
<script>
import PostList from "@/components/post/PostList.vue";
import PostAside from "@/components/post/PostAside.vue";
export default {
  components: {
    PostList,
    PostAside
  },
  data() {
    return {
      pageIndex: +this.$route.query._start || 0,
      pageSize: +this.$route.query._limit || 3,
      PostList: [],
      totalpage: "",
      keywordCity: "",
      cityList: ""
    };
  },
  mounted() {
    this.getPostList();
    this.getPostCities();
  },
  methods: {
    handleSizeChange(size) {
      this.pageSize = size;
      this.pageIndex = 1;
      console.log("页面的pagesize", size);
      this.getPostList();
    },
    handleCurrentChange(pageindex) {
      console.log("当前页面", pageindex);
      this.pageIndex = pageindex;
      this.getPostList();
    },
    getPostList() {
      this.$axios({
        url: "/posts",
        method: "get",
        params: {
          city: this.keywordCity || this.$route.query.city || "北京",
          _start: this.pageIndex,
          _limit: this.pageSize
        }
      }).then(res => {
        console.log("文章列表", res);
        const { data, total } = res.data;
        this.PostList = data;
        this.totalpage = total;
      });
    },
    handleSearch(value) {
      console.log("输入框的值", value);
      this.keywordCity = value;
      this.getPostList();
      this.$router.push({
        path: "/post",
        query: {
          _start: this.pageIndex,
          _limit: this.pageSize,
          city: this.keywordCity
        }
      });
    },
    getPostCities() {
      this.$axios({
        url: "/posts/cities",
        method: "get"
      }).then(res => {
        console.log("城市列表", res);
        const { data } = res.data;
        this.cityList = data;
      });
    },
    handleCity(city) {
      this.keywordCity = city;
      console.log("params", city);
      //调用获取文章的函数
      this.getPostList();
    }
  }
};
</script>
<style lang="less" scoped>
.container {
  width: 1000px;
  margin: 20px auto;
  .main {
    width: 700px;
    height: fit-content;
    .searchPost {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 40px;
      line-height: 40px;
      box-sizing: border-box;
      border: 3px solid #ffa500;
      input {
        height: 100%;
        flex: 1;
        margin: 0 20px;
        border: none;
        outline: none;
        background-color: #fff;
      }
      i {
        font-size: 24px;
        color: orange;
        font-weight: 700;
        margin-right: 10px;
      }
    }
    .searchRecommend {
      padding: 10px 0;
      font-size: 12px;
      color: #666;
      span {
        margin-right: 5px;
        &:hover {
          color: orange;
          font-weight: 700;
          text-decoration: underline;
          cursor: pointer;
        }
      }
    }
    .posttitle {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 10px;
      border-bottom: 1px solid #eee;
      position: relative;
      h4 {
        font-weight: normal;
        font-size: 18px;
        color: orange;
        &::after {
          content: "";
          display: block;
          width: 72px;
          height: 2px;
          background-color: orange;
          position: absolute;
          bottom: 0;
          left: 0;
        }
      }
    }
    .postList {
      width: 700px;
    }
  }
}
//侧边栏
.aside {
  width: 260px;
  height: fit-content;
}
</style>